<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <a-row>
      <a-col :span="6">
        <a-form-model-item label="批次号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="batchNumber">
          <a-input v-model="batchNumber" placeholder="请输入材料批次号"></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="6">
        <a-button type="primary" @click="materialSearch" icon="search" style="margin-top: 4px">查询</a-button>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <a-form-model-item label="物料编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialCode">
          <a-input v-model="model.materialCode" disabled></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="7">
        <a-form-model-item label="物料名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialName">
          <a-input v-model="model.materialName" disabled></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="7">
        <a-form-model-item label="规格型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specificationModel">
          <a-input v-model="model.specificationModel" disabled></a-input>
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit">
          <a-input v-model="model.unit" disabled></a-input>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-tabs v-model="activeKey" @change="handleChangeTab" :lazy="false">
      <a-tab-pane key="inbound" tab="材料入库信息" :force-render="true">
        <inbound ref="inboundComponent" />
      </a-tab-pane>
      <a-tab-pane key="confirm" tab="材料检验信息" :force-render="true">
        <confirm ref="confirmComponent" />
      </a-tab-pane>
      <a-tab-pane key="outbound" tab="材料出库信息" :force-render="true">
        <outbound ref="outboundComponent" />
      </a-tab-pane>
      <a-tab-pane key="feeding" tab="生产投料信息" :force-render="true">
        <feeding ref="feedingComponent" />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { getAction } from '@api/manage'
import Inbound from './modules/inbound.vue'
import Confirm from './modules/confirm.vue'
import Outbound from './modules/outbound.vue'
import Feeding from './modules/feeding.vue'

export default {
  name: 'traceForwardList',
  components: { Inbound, Confirm, Outbound, Feeding },
  data() {
    return {
      description: '正向追溯页面',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      batchNumber: '',
      model: {
        materialCode: '',
        materialName: '',
        specificationModel: '',
        unit: '',
      },
      activeKey: 'inbound',
      url: {
        list: '/wms/inventory/material',
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    materialSearch() {
      this.model.materialCode = ''
      this.model.materialName = ''
      this.model.specificationModel = ''
      this.model.unit = ''
      if (this.batchNumber) {
        getAction(this.url.list, { batchNumber: this.batchNumber }).then((res) => {
          if (res.success) {
            let minfo = res.result || []
            this.model.materialCode = minfo.materialCode || ''
            this.model.materialName = minfo.materialName || ''
            this.model.specificationModel = minfo.specificationModel || ''
            this.model.unit = minfo.unitText || ''
            this.activeKey = 'inbound'
            this.handleChangeTab()
          }
        })
      }
    },
    handleChangeTab() {
      switch (this.activeKey) {
        case 'inbound':
          this.$refs.inboundComponent.loadInboundData(this.batchNumber, false)
          break
        case 'confirm':
          this.$refs.confirmComponent.loadConfirmData(this.batchNumber, 'raw-material', false)
          break
        case 'outbound':
          this.$refs.outboundComponent.loadOutboundData(this.batchNumber, false)
          break
        case 'feeding':
          this.$refs.feedingComponent.loadFeedingData(this.batchNumber, false)
          break
        default:
          break
      }
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
